import React,{Component,Fragment} from 'react'
import BaseForm from './../../components/BaseForm'
import axios from './../../axios'

import {Card} from 'antd'

export default class BikeMap extends Component {
    state = {}
    componentWillMount() {
        this.requestList()
    }
    params = {
    }
    requestList = () => {
        axios.ajax({
            url:'map/bike_list',
            params:this.params
        }).then(res => {
            if(res.code === 0) {
                this.renderMap(res.result)
            }
        })
    }
    handleQuery = (formData) => {
        this.params = formData
    }
    //地图标注
    addMarker = (point,imgUrl,map) => {  // 创建图标对象   
        var myIcon = new window.BMap.Icon(imgUrl, new window.BMap.Size(36, 42), {    
            // 指定定位位置。   
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
            // 图标中央下端的尖角位置。    
            anchor: new window.BMap.Size(18, 42),
            imageSize: new window.BMap.Size(36, 42),      
        });      
        // 创建标注对象并添加到地图   
        var marker = new window.BMap.Marker(point, {icon: myIcon});    
        map.addOverlay(marker);    
    }    
    //百度地图
    //参考地址：http://lbsyun.baidu.com/index.php?title=jspopular/guide/mark
    renderMap = (data) => {
        //获取行车轨迹
        let route_list = data.route_list
        //设置起始地方
        let startBike = route_list[0]
        //开始经纬度
        let start_lon = startBike.split(',')[0]
        let start_lat = startBike.split(',')[1]

        let endBike = route_list[route_list.length-1]
        console.log(endBike)
        //结束经纬度
        let end_lon = endBike.split(',')[0]
        let end_lat = endBike.split(',')[1]
        // 创建地图实例
        var map = new window.BMap.Map("container");
        // 创建点坐标            
        var point = new window.BMap.Point(end_lon, end_lat); //以结束的点为中心
        // 初始化地图，设置中心点坐标和地图级别    
        map.centerAndZoom(point, 11);

        //将坐标转化成point
        let startBikepoint = new window.BMap.Point(start_lon, start_lat);
        this.addMarker(startBikepoint,"/assets/start_point.png",map)
        let endBikepoint = new window.BMap.Point(end_lon, end_lat);
        this.addMarker(endBikepoint,"/assets/end_point.png",map)

        //车辆位置
        const bike_list = data.bike_list
        bike_list.forEach(item => {
            const item_lon = item.split(',')[0]
            const item_lat = item.split(',')[1]
            //将坐标转化成point
            const item_point = new window.BMap.Point(item_lon, item_lat);
            //显示车辆
            return this.addMarker(item_point,"/assets/bike.jpg",map)
        })

        //行车轨迹
        const route_list_point = []
        route_list.forEach(item => {
            const p = new window.BMap.Point(item.split(',')[0],item.split(',')[1])
            return route_list_point.push(p)
        })
        var polyline = new window.BMap.Polyline(route_list_point,
            {
                strokeColor:"#ef4136", //设置线样式
                strokeWeight:3, 
                strokeOpacity:1
            }
        );
        map.addOverlay(polyline);

        //绘制服务区域
        const service_list = data.service_list
        const service_list_point = []
        service_list.forEach(item => {
            const p = new window.BMap.Point(item.lon,item.lat)
            return service_list_point.push(p)
        })
        var polyline = new window.BMap.Polyline(service_list_point,
            {
                strokeColor:"#ef4136", //设置线样式
                strokeWeight:5, 
                strokeOpacity:1
            }
        );
        map.addOverlay(polyline);

        

        //控件显示位置 右上角
        let opts = {anchor:window.BMAP_ANCHOR_TOP_RIGHT}
        //地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件
        map.addControl(new window.BMap.NavigationControl(opts));    
        map.addControl(new window.BMap.ScaleControl(opts));    
        map.addControl(new window.BMap.OverviewMapControl(opts));
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);      
        
        
    }
    formList = [
        {
            type:'城市'
        },
        {
            type:'时间查询'
        },
        {
            type:'SELECT',
            field:'order_status',
            label:'订单状态',
            initialValue:'0',
            list:[{value:'0',name:'全部'},{value:'1',name:'进行中'},{value:'2',name:'行程结束'}]
        }
    ]
    render() {
        return (
            <Fragment>
                <Card>
                    <BaseForm formList={this.formList} handleQuery={this.handleQuery} />
                </Card>
                <Card>
                    <div id="container" style={{height:500}}></div>
                </Card>
            </Fragment>
        )
    }
}